<template>
<div class="add-container">
  <el-form class="add-panel" label-position="left" :model="formData" :rules="rules">
    <div class="add-input">
      <el-form-item v-if="!companyId" label-width="120px" class="form-item" label="所属劳务公司：" prop="serviceCorporationId">
        <el-select style="width:100%" v-model="formData.serviceCorporationId" placeholder="请选择劳务公司">
          <el-option v-for="item in corporationList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        
      </el-form-item>
      <el-form-item label-width="120px" class="form-item" label="班组名称：" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
    </div>
    <el-form-item class="form-item" label="班组介绍:" prop="introduce">
      <br>
      <quill-editor
          class="editor"
          ref="myTextEditor"
          v-model="formData.introduce"
          :options="editorOption"
          @change="onEditorChange($event)"
        >
        </quill-editor>
      <!-- <tinymce :height="300" v-model="formData.introduce"/> -->
    </el-form-item>
    <el-form-item class="add-btn">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <!-- <el-button @click="importTeam"> 去批量导入 <i class="el-icon-right"/> </el-button> -->
    </el-form-item>
  </el-form>
</div>
</template>
<script>
// import Editor from '@tinymce/tinymce-vue'
import team from'@/api/team.js'
import corp from'@/api/corp.js'
import Tinymce from '@/components/Tinymce'
export default {
  // components:{   'editor': Editor },
  components:{Tinymce},
  data(){
    return{
      companyId:null,
      formData:{
        serviceCorporationId:this.$route.query.corpId,
        name:'',
        introduce:'',
        teamId:this.$route.params.id,
      },
      corporationList:[],//所属劳务公司下拉框
      rules:{
        serviceCorporationId:[
          {
            required:true,
            message:'请选择所属劳务公司！',
            trigger:'blur'
          }
        ],
        name:[
          {
            required:true,
            message:'请输入班组名称',
            trigger:'blur'
          },
          {
            min:2,
            max:10,
            message:'长度在2到10个字符',
            trigger:'blur'
          }
        ]
      },
      corpId:this.$route.params.id,
      message:'',
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image"], // 链接、图片、视频
          ], //工具菜单栏配置
        },
        placeholder: "请在这里添加班组介绍", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true, //语法检测
      },
    }
  },
  created(){
    var companyId = localStorage.getItem('companyId')
    if(companyId) {//如果是劳务公司进来，就不选劳务公司，直接提交的时候传
      this.companyId = companyId
      this.formData.serviceCorporationId = companyId
    }
    this.getcorporationList()
    this.getFormList()
  },
  methods:{
    importTeam(){
      this.$router.push({path:'/team/import'})
    },
    check(){
      if(!this.formData.serviceCorporationId){
        this.message = "请选择所属劳务公司";
        return false
      }else if(!this.formData.name){
        this.message = "请输入班组名称";
        return false
      }
    },
    onSubmit(){
      if(this.check()==false){
        this.$message.error(this.message);
      }else{
        var formData=this.formData
        console.log(formData);
        team.updateTeam({
          introduce:formData.introduce,
          name:formData.name,
          service_corporation_id:formData.serviceCorporationId,
          team_id:formData.teamId})
        .then(res=>{
          this.$message({
              type: "success",
              message: res.message,
            });
            this.$router.push({path:'/team/list'})
          }).catch(res=>{
            this.$message({
              type: "error",
              message: res.message,
            });
          })
        // this.$router.go(-1)
      }      
    },
    //加载下拉框
    getcorporationList(){
      const data = {
        currentPage:null,
        endTime:null,
        pageSize:null,
        searchInput:null,
        startTime:null
      }
      corp.listByProjectId(data).then(res=>{
        var corporationList= this.corporationList;
        res.data.data.records.forEach(function(item){
          corporationList.push({value:item.serviceCorporationId,label:item.name})
        })
        this.corporationList=corporationList
      })
    },
    getFormList(){      
      if(this.$route.params && this.$route.params.id){
        team.detailById(this.formData.teamId).then(res=>{
          console.log(res);
          this.formData.serviceCorporationId=res.data.data.serviceCorporationId
          this.formData.name=res.data.data.name
          this.formData.introduce=res.data.data.introduce
        })
      }
    },
    onEditorChange(event){
      console.log(event)
      // console.log("this.formData.introduce:"+this.formData.introduce)
    },
  }
}
</script>
<style lang="scss">
// .ql-snow .ql-picker{
//   height: 37px;
// }
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
}

.ql-editor {
    min-height: 300px;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0;
}

.ql-snow .ql-picker.ql-size {
    width: 65px;
}
</style>